<!DOCTYPE html>
<html lang="en">
    <head>
        <title></title>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <script src="./vue2.js"></script>
    </head>
    <body>
        <div id="app">

            <!-- 渲染数组 -->
            <h1>v-for="item in arr"</h1>
            <p v-for="item in user">{{item.name}}:{{item.age}}</p>

            <h1>v-for="(item,index) in  arr"</h1>
            <p v-for="(item,index) in user">{{item.name}}:{{item.age}},索引:{{index}}</p>

            <!-- 渲染对象 -->

            <h1>v-for="value in boss"</h1>
            <p v-for="value in boss">{{value}}</p>

            <h1>v-for="(value,key) in boss"</h1>
            <p v-for="(value,key) in boss">{{key}}:{{value}}</p>

            <h1>v-for="(value,key,index) in boss"</h1>
            <p v-for="(value,key,index) in boss">{{key}}:{{value}}----{{index}}</p>
        </div>
        <script>
            var vm = new Vue({
                el: '#app',
                data: {
                    user:[
                        {name:"jack",age:12},
                        {name:"rose",age:13},
                    ],
                    boss:{
                        name:"mayun",
                        age:11
                    }
                }
            })
        </script>
    </body>
</html>